<template>
  <div class="body">
    <div class="biaoptou">
      《{{ row.scaleTitle }}》测评档案
    </div>
    <el-descriptions class="margin-top" title="一、基本信息" :column="3" border>
      <el-descriptions-item label="登录名">{{ row.loginName }}</el-descriptions-item>
      <el-descriptions-item label="姓名">{{ row.userName }}</el-descriptions-item>
      <el-descriptions-item label="部门">{{ row.deptName }}</el-descriptions-item>
      <el-descriptions-item label="创建时间">{{ row.createTime }}</el-descriptions-item>
    </el-descriptions>
    <el-descriptions title="二、量表介绍">
    </el-descriptions>
    <div class="ziti">
      {{ row.resultContent }}
    </div>
    <el-descriptions title="三、历次作答记录">
    </el-descriptions>

    <el-table :data="result_personalList">
      <el-table-column type="index" label="序号">
      </el-table-column>
      <el-table-column prop="createTime" label="时间">
      </el-table-column>
      <el-table-column prop="countScore" label="得分">
      </el-table-column>
    </el-table>

    <el-descriptions title="四、心里测评趋势图">
    </el-descriptions>
    <el-card>
      <div id="line-chart" style="height: 400px;"></div>
    </el-card>
  </div>
</template>

<script>
import { listResult_personal } from "@/api/mentalTest/personScore";
import * as echarts from 'echarts';
export default {
  data () {
    return {
      row: [],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10000,
        scaleId: null,
        scaleTitle: null,
        userId: null,
        loginName: null,
        userName: null,
        countScore: null,
        factorScore: null,
        resultContent: null,
        factorResult: null,
        userAnswer: null,
        classesName: null,
        deptName: null
      },
      // 个人测评成绩报告表格数据
      result_personalList: [],
      // 总条数
      total: 0,
      // 遮罩层
      loading: true,
      // 折线图
      greattime: [],
      score: [],
      dataLoaded: false, // 标志位，表示数据是否已加载完毕
    }
  },
  created () {
    this.row = this.$route.query.row;
    this.queryParams.loginName = this.row.loginName;
    this.queryParams.scaleTitle = this.row.scaleTitle;
    this.getList();
  },
  methods: {

    getList () {
      this.loading = true;
      listResult_personal(this.queryParams).then(response => {
        this.result_personalList = response.rows;
        this.total = response.total;
        this.greattime = response.rows.map(item => item.createTime);
        this.score = response.rows.map(item => item.countScore);
        this.dataLoaded = true; // 数据加载完毕，设置标志位为true
        this.loading = false;
        this.renderChart(); // 数据加载完成后渲染折线图

      });
    },

    renderChart () {
      // 基于准备好的dom，初始化echarts实例
      this.myChart = echarts.init(document.getElementById('line-chart'));

      // 指定图表的配置项和数据
      const option = {
        title: {
          text: '心里测评趋势图'
        },
        tooltip: {},
        xAxis: {
          data: this.greattime
        },
        yAxis: {},
        series: [{
          name: '分数',
          type: 'line',
          data: this.score
        }]
      };

      // 使用刚指定的配置项和数据显示图表。
      this.myChart.setOption(option);
    },
  },
  beforeDestroy () {
    if (this.myChart) {
      this.myChart.dispose();
    }
  }
}
</script>

<style scoped>
.body {
  margin-right: 20%;
  margin-left: 20%;
}

.biaoptou {
  display: flex;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2em;
  margin-top: 50px;
}

.biaoti {
  font-weight: bold;
  font-size: 1.2em;
}

.ziti {
  text-indent: 20px;
  font-size: 80%;
}
</style>
